<template>
    <Page class="About" :options="mPageOptions">
        <div class="flex-v scroll-y" ref="ContentLayout">
            <div class="VersionLayout flex-v center" v-focusable>
                <img class="Icon" src="icons/icon128x128.png">
                <div class="Tag" v-for="(item,index) in mTags" :key="index">
                    <span>{{item.label}}</span>
                    <span>{{item.value}}</span>
                </div>
            </div>
            <div v-if="mQuote.length" class="Quote">引用</div>
            <div class="QuoteTag w-100 flex-v" v-for="(item,index) in mQuote" :key="index" v-focusable>
                <div class="flex-h">
                    <span class="flex-1">{{item.name}}</span>
                    <!-- <span>@xxxx</span> -->
                </div>
                <span>{{item.url}}</span>
            </div>
        </div>
    </Page>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import AppPage from "app/common/AppPage";
import { PageOptions } from "app/components/navigation/Page.vue";
import manifest from "public/manifest.webapp";

@Component
export default class About extends AppPage {

    @Prop({ default: "标题" }) readonly title!: string;

    mPageOptions = this.createPageOptions();
    createPageOptions(): PageOptions {
        let context = this;
        return {
            toolBar: {
                title: "关于",
            },
            navigationBar: {
                show: true,
                options: {
                    right: "返回",
                    on: {
                        keyPress: {
                            SoftRight: () => {
                                context.back();
                            },
                        },
                        keyLongPress: {
                            SoftLeft: () => {
                                this.onClick_Menu();
                            }
                        },
                    }
                },
            }
        }
    }

    mQuote = [
        // {
        //     name: "txt-reader",
        //     url: "https://github.com/js1016/txt-reader",
        // },
    ]

    mTags = [
        { label: "版本", value: manifest.version },
        { label: "作者", value: "蕉色幻想", },
        { label: "编译时间", value: __VERSION__ },
    ]

    onStart() {
        if (__KAIOS__ < 3) {
            this.themeDark();
        }
    }


    onClick_Menu() {

    }

}
</script>

<style lang="scss" scoped>
.About {
    font-size: 12px;
    .VersionLayout {
        padding: 7px;
        color: black;
        &.focus {
            background: rgba($color: $colorPrimary, $alpha: 0.1);
        }
        .Icon {
            height: 64px;
        }
    }
    .Tag {
        & > * + * {
            margin-left: 5px;
        }
    }
    .Quote {
        margin: 5px 10px;
        color: rgba($color: #000000, $alpha: 0.4);
    }
    .QuoteTag {
        padding: 5px 10px;
        * {
            word-break: break-all;
        }
        &.focus {
            background: rgba($color: $colorPrimary, $alpha: 0.1);
        }
        & > *:nth-child(1) > *:nth-child(2),
        & > *:nth-child(2) {
            color: rgba($color: $colorPrimary, $alpha: 1);
        }
    }
}
</style>